<template>
  <div class="login">
    <a-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
      <div class="title">账号登录</div>
      <a-form-item name="username">
        <a-input v-model:value="loginForm.username" :disabled="disabled" type="text" size="large" auto-compconste="off"
          placeholder="请输入账号">
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input-password v-model:value="loginForm.password" :disabled="disabled" size="large" type="password"
          auto-compconste="off" placeholder="请输入密码">
        </a-input-password>
      </a-form-item>
      <!-- <a-checkbox
        v-model:checked="loginForm.rememberMe"
        :disabled="disabled"
        style="margin: 0px 0px 25px 0px"
        >30天内免登录</a-checkbox
      > -->
      <!-- 临时布局占位 -->
      <div class="occupy-div"></div>
      <a-form-item style="width: 100%">
        <div style="padding-top: 5px">
          <a-button :loading="loading" :disabled="disabled" size="large" type="primary" style="width: 100%"
            @click="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </a-button>
          <div style="
              display: flex;
              justify-content: space-between;
              padding: 18px 100px;
            " v-if="register">
            <router-link style="color: rgba(0, 0, 0, 0.65)" :to="'/sign/login'">
              忘记密码
            </router-link>
            <div style="color: #c7c7c7">|</div>
            <router-link style="color: rgba(0, 0, 0, 0.65)" class="link-type" :to="'/sign/login'">申请账号</router-link>
          </div>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
// 登录界面
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { userLogin } from '@/api/account'
import CryptoJS from 'crypto-js'
import { useAccountStore, useRoleStore } from '@/stores/account'
import { useRouter } from 'vue-router'
const userSave = useAccountStore()
const roleStore = useRoleStore()
const router = useRouter()
const loginRef = ref()

let loginForm = ref({
  username: '',
  password: '',
  rememberMe: false,
})
const loginRules = ref({
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
})
// 输入禁用
let disabled = ref(false)
let loading = ref(false)
// 注册开关
let register = false

// 动态生成16位字符串作为盐
// let getRandomHexString = length => {
//   var len = length || 12
//   if (len > 12) {
//     throw new Error('getRandomHexString(length) length 不能大于12')
//   }
//   return Math.random()
//     .toString(16)
//     .substring(2, 2 + len)
// }

let aseKey = '123456'
// 生成盐
// let salt = getRandomHexString()
// ecb信息加密
const encryptInfo = info => {
  // md5(string+salt)
  // info = CryptoJS.MD5(info + salt).toString(CryptoJS.enc.Hex)

  let newinfo = CryptoJS.AES.encrypt(
    CryptoJS.enc.Utf8.parse(info),
    CryptoJS.enc.Utf8.parse(aseKey),
    {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    },
  ).toString() // 用户密码加密
  return newinfo
}
// 点击登录
const handleLogin = () => {
  loginRef.value
    .validate()
    .then(() => {
      loading.value = true
      disabled.value = true

      let data = {
        workNumber: loginForm.value.username,
        userPwd: encryptInfo(loginForm.value.password), // 密码加密
        // salt, // 暂时取消盐
      }
      userLogin(data)
        .then(async res => {
          //  接口返回后取消loading
          if (res.success) {
            userSave.login(
              res.data.token,
              loginForm.value.username,
              res.data.userId,
            )
            await roleStore.update()
            // 跳转路由
            router.push('/')
            message.success('登录成功')
            loading.value = false
            disabled.value = false
          }
        })
        .catch(error => {
          loading.value = false
          disabled.value = false
          // 登录接口调用失败
          message.error('登录失败:' + error.message)
        })
    })
    .catch(error => {
      // 输入验证失败
      console.log('error', error)
    })
}
</script>

<style lang="less" scoped>
.login {
  // 子box居中
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('./images/login-background@1x.png');
  // 满铺
  height: 100%;
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: rgba(0, 0, 0, 0.85);
  font-size: 22px;
  font-family: PingFangSC-Regular;
  line-height: 28px;
}

// 临时布局占位
.occupy-div {
  margin: 0px 0px 60px 0px;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 380px;
  height: 442px;
  padding: 48px 28px 85px 28px;
}

// 覆盖按钮样式
:deep(.ant-input-lg) {
  height: 46px;
  border-radius: 2px;
}

:deep(.ant-input-password) {
  height: 46px;
  border-radius: 2px;

  .ant-input-lg {
    height: 32px;
  }
}

:deep(.ant-btn) {
  height: 46px;
  border-radius: 2px;
}
</style>
